<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <#include 'cdn.ftl'>
  <link rel="stylesheet" href="${root}/static/css/index.css">
  <link rel="stylesheet" href="${root}/static/layui/css/layui.css">
  <script src="${root}/static/layui/layui.js"></script>
  <script src="${root}/static/js/common.js"></script>
  <title>皖西学院聘期考核与分级聘任业绩成果申报系统</title>
  <style>
    #itemComment {
      padding: 5px;
      margin-bottom: 5px;
      border-radius: 5px;
      color: #FFFFFF;
      background-color: #789892;
      font-size: 12px;
    }
  </style>
  <#include 'gio.ftl'>
</head>
<body class="layui-bg-gray">
<nav class="layui-bg-cyan">
  <ul class="layui-nav layui-bg-cyan layui-container text-right">
    <li class="nav-title">
      <a href="${root}/home"><img src="${root}/static/image/wxxyu.gif" height="50"></a>
    </li>
    <li class="layui-nav-item ${(title == '个人主页')?string('layui-this', '')}"><a href="${root}/home">主页</a></li>
    <li class="layui-nav-item">
      <a href="javascript:">
        <img src="${root}${_USER.cover!'/static/image/body.png'}" class="layui-nav-img">我
      </a>
      <dl class="layui-nav-child">
        <dd>
          <a href="${root}/setting">
            <span class="fa fa-id-card-o"></span>
            <cite>个人信息</cite>
          </a>
        </dd>
        <dd>
          <a href="${root}/safe">
            <span class="fa fa-pencil-square-o"></span>
            <cite>安全管理</cite>
          </a>
        </dd>
        <dd>
          <a href="${root}/logout">
            <span class="fa fa-sign-out"></span>
            <cite>退出登录</cite>
          </a>
        </dd>
      </dl>
    </li>
  </ul>
</nav>

<script type="text/html" id="record-tpl">
  <div class="model-padding">
    <div class="layui-row">
      <form id="record-form" class="layui-form" lay-filter="record-form">
        <input type="hidden" name="incidentId" value="{{d.incidentId||''}}">
        <input type="hidden" name="id" value="{{d.record.id||''}}">
        <div class="layui-col-sm12 layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">记录名</label>
            <div class="layui-input-block">
              <input name="name" placeholder="请输入记录的名字（可选）"
                     value="{{d.record.name||''}}" class="layui-input">
            </div>
          </div>
        </div>

        <div class="layui-col-sm12 layui-col-xs12">
          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">项目条目</label>
              <div class="layui-input-block">
                <select name="itemId" lay-filter="itemId">
                  {{# layui.each(d.items, function(index, val){ }}
                  <option value="{{val.id}}" {{d.record.itemId==val.id?'selected':''}}>{{val.name}}</option>
                  {{# }) }}
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">项目等级</label>
              <div class="layui-input-block">
                <select name="itemRankId" lay-verify="required"></select>
              </div>
            </div>
          </div>
        </div>

        <div class="layui-col-sm12 layui-col-xs12">
          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">承担身份</label>
              <div class="layui-input-block">
                <select name="placeId" lay-verify="required"></select>
              </div>
            </div>
          </div>

          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">立项时间</label>
              <div class="layui-input-block">
                <input type="text" name="beginTime" class="layui-input layui-disabled" disabled
                       id="beginTime_" value="{{d.record.beginTime?d.record.beginTime:''}}" placeholder="忽略">
              </div>
            </div>
          </div>
        </div>

        <div class="layui-col-sm12 layui-col-xs12">
          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">所得分值</label>
              <div class="layui-input-block">
                <input type="number" name="score" class="layui-input layui-disabled" disabled
                       value="{{d.record.score}}" placeholder="忽略">
              </div>
            </div>
          </div>

          <div class="layui-col-sm6 layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">结项时间</label>
              <div class="layui-input-block">
                <input type="text" name="endTime" class="layui-input" id="endTime_" lay-verify="required"
                       value="{{d.record.endTime?d.record.endTime:''}}" placeholder="tip:同成果获取时间">
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-sm12 layui-col-xs12">
          <label class="layui-form-label">填写说明</label>
          <div class="layui-input-block">
            <div class="layui-badge layui-bg-red" id="incRange">
              统计成果时间区间：<span id="begin"></span> - <span id="end"></span>
            </div>
            <p style="margin: 5px;"></p>
            <div id="itemComment"></div>
          </div>
        </div>

        <div class="layui-col-sm12 layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-col-sm6 layui-col-xs6 layui-col-sm-offset6 text-right">
              {{# if (d.record.id == null) { }}
              <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="addRecord">添加</button>
              {{# } else { }}
              <button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateRecord">修改</button>
              {{# } }}
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</script>

<script>
  var incident;
  var gdate;
  layui.use(['element', 'jquery', 'laydate'], function () {
    var $ = layui.$;
    var element = layui.element;
    gdate = layui.laydate;
    var $ci = $('#current-inc');

    $.post('${root}/incident/began', function (data) {
      incident = data.payload;
      if (data.status === 200) {
        $ci.find('span').html(incident.name);
      } else {
        $ci.find('span').html('暂无');
      }
    });

    // 查看事件详情
    var tipIndex;
    $ci.on('click', function () {
      tipIndex = layer.tips('<div>' +
          '参与人数/人：<b class="layui-badge layui-bg-cyan">' + incident.peopleNum + '</b><br>' +
          '有效区间/上：<b class="layui-badge layui-bg-blue">' + incident.beginRange + '</b><br>' +
          '有效区间/下：<b class="layui-badge layui-bg-orange">' + incident.endRange + '</b>' +
          '</div>', this, {tips: [4, '#387c98'], time: 120000});
    });
    $ci.on('mouseleave', function () {
      layer.close(tipIndex);
    })
  });

  function saveAndUpdateRecord(items, $, form, layer, laytpl, record, success) {
    var $recordTpl = $('#record-tpl');

    if (record == null && incident == null) { // 不是修改才判断有没有事件
      layer.msg('当前时间无法操作！', {icon: 4, time: 2000});
    } else {
      $.post('${root}/item/page', {page: 1, limit: 10000}, function (data) {
        if (data.status === 200) {
          items = data.payload.content;
          var iid, cincident;
          if (record != null) {
            iid = record.incidentId;
            cincident = record.incident;
          } else {
            iid = incident.id;
            cincident = incident;
          }

          // 渲染弹框
          laytpl($recordTpl.html()).render({incidentId: iid, items: items, record: record || {}}, function (html) {
            mainIndex = layer.open({
              type: 1,
              title: record == null ? '<b class="layui-badge layui-bg-blue">业绩填写</b>'
                  : '<b class="layui-badge layui-bg-green">业绩编辑</b>',
              move: false,
              area: ['560px'],
              content: html
            });

            $("#incRange > #begin").html(cincident.beginRange);
            $("#incRange > #end").html(cincident.endRange);

            var $item = $('[name=itemId]');
            var $beginTime = $('#beginTime_');
            var bt = '2015-12-12'; // 默认的立项时间，在后面使用
            var $score = $('[name=score]');
            var $form = $('#record-form');
            if (record != null) {
              bt = record.beginTime;
              setDisable($item, true);
              setSelect($form, record); // 设置联动选择框
            } else if (items.length > 0) {
              setSelect($form, {itemId: items[0].id}); // 初始化联动框
            }

            // 监听评定项目选择框
            form.on('select(itemId)', function (obj) {
              var id = obj.value;
              setSelect($form, {itemId: id});
            });

            // 提交评定记录
            form.on('submit(addRecord)', function (obj) {
              var fd = obj.field;
              if (fd.beginTime == null || fd.beginTime == 'null') delete fd.beginTime;
              if (fd.score == null || fd.beginTime == 'null') delete fd.score;
              $.post('${root}/item/record/add', fd, function (data) {
                if (data.status === 200) {
                  layer.msg('添加成功', {time: 1200, icon: 6});
                  success ? success() : null;
                  layer.close(mainIndex);
                } else {
                  layer.alert(data.message, {icon: 2, title: '提示'});
                }
              });
              return false;
            });

            // 更新评定记录
            form.on('submit(updateRecord)', function (obj) {
              var fd = obj.field;
              if (fd.beginTime == null || fd.beginTime == 'null') delete fd.beginTime;
              if (fd.score == null || fd.beginTime == 'null') delete fd.score;
              $.post('${root}/item/record/change', fd, function (data) {
                if (data.status === 200) {
                  layer.msg('修改成功', {time: 1200, icon: 6});
                  success ? success() : null;
                  layer.close(mainIndex);
                } else {
                  layer.alert(data.message, {icon: 2, title: '提示'});
                }
              });
              return false;
            });

            form.render('select');

            /**
             * 设置联动选择框 同时会设置是否禁用
             * 初始化rank和place选择框以及立项时间
             */
            function setSelect($form, record) {
              var $itemRank = $form.find('[name=itemRankId]');
              var $itemPlace = $form.find('[name=placeId]');
              var $itemComment = $form.find('#itemComment');
              var item = findItemById(record.itemId, items);
              $itemComment.html(item.comment);
              setDisable($beginTime, !item.needEnd);
              if (item.needEnd) {  // 需要结项的 设置立项时间可操作
                c = gdate.render({
                  elem: '#beginTime_',
                  value: bt,
                  theme: '#33845d'
                });
              } else {
                delete c;
                $beginTime.val('');
              }
              setDisable($score, !item.canWrite);
              if (item.canWrite) {
                $score.attr('placeholder', '请填入分值');
              } else {
                $score.val('');
                $score.attr('placeholder', '忽略');
              }

              var rankTpl = '{{# layui.each(d.ranks, function(index, val){ }}\n' +
                  '  <option value="{{val.id}}" {{d.rid==val.id?"selected":""}}>{{val.name}}</option>\n' +
                  '{{# }); }}',
                  placeTpl = '{{# layui.each(d.places, function(index, val){ }}\n' +
                      '  <option value="{{val.id}}" {{d.pid==val.id?"selected":""}}>{{getPos(val.place)}}</option>\n' +
                      '{{# }); }}';
              laytpl(rankTpl).render({ranks: item.ranks, rid: record.itemRankId}, function (rh) {
                $itemRank.html(rh);
              });
              laytpl(placeTpl).render({places: item.places, pid: record.placeId}, function (ph) {
                $itemPlace.html(ph);
              });

              form.render('select');
            }

            function setDisable(el, disable) {
              if (disable == null || disable) {
                el.prop('disabled', true).addClass('layui-disabled')
              } else {
                el.prop('disabled', false).removeClass('layui-disabled');
              }
            }
          });

          gdate.render({
            elem: '#endTime_',
            theme: '#8d43a2'
          });
        } else {
          layer.alert('暂无可操作业绩项目！', {title: '提示框', icon: 7});
        }
      });
    }

    function findItemById(id, items) {
      var len = items.length;
      for (var i = 0; i < len; i++) {
        if (items[i].id == id) return items[i];
      }
      return null;
    }
  }
</script>

<div class="layui-container">
  <div style="margin: 15px 0;" class="layui-card">
    <div class="layui-card-body layui-clear">
      <h3 class="pull-left"><b>当前位置：${title}</b></h3>
      <div class="pull-right">
        <b class="layui-badge" id="current-inc" style="cursor: pointer;">
          当前事件: <span></span>
        </b>
      </div>
    </div>
  </div>